<template>
  <div class="myForm">
    <h1 class="header">
      <slot name="header" />
    </h1>

    <el-form :label-width="labelWidth">
      <el-row>
        <template v-for="item in formItems" :key="item.key">
          <el-col v-if="!item.isHide" v-bind="colLayout">
            <el-form-item
              :style="itemStyle"
              :label="item.label"
              :rules="item.rules"
              :prop="item.key"
            >
              <!-- 输入框 -->
              <el-input
                v-if="['input', 'password'].includes(item.type)"
                v-bind="item.otherOptions"
                :placeholder="item.placeholder"
                :show-password="item.type === 'password'"
                :model-value="modelValue[item.key]"
                @update:modelValue="handlerValueChange($event, item.key)"
                class="field"
              />

              <!-- 选择器 -->
              <el-select
                v-else-if="item.type === 'select'"
                v-bind="item.otherOptions"
                :placeholder="item.placeholder"
                :value-key="'value'"
                :model-value="modelValue[item.key]"
                @update:modelValue="handlerValueChange($event, item.key)"
                class="field"
              >
                <el-option
                  v-for="option in item.options"
                  :label="item.filed ? option[item.filed.label] : option.label"
                  :value="item.filed ? option[item.filed.value] : option.value"
                  :key="item.filed ? option[item.filed.value] : option.value"
                />
              </el-select>

              <!-- 时间选择 -->
              <el-date-picker
                v-if="item.type === 'datePicker'"
                v-bind="item.otherOptions"
                :model-value="modelValue[item.key]"
                @update:modelValue="handlerValueChange($event, item.key)"
                class="field"
              />
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>

    <div class="footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import type { IFormItem } from './types';
export * from './types';

export default defineComponent({
  props: {
    modelValue: {
      type: Object,
      required: true,
      default: () => ({}),
    },

    formItems: {
      type: Array as PropType<IFormItem[]>,
      default: () => [],
    },

    labelWidth: {
      type: String,
      default: '100px',
    },

    itemStyle: {
      type: Object,
      default: () => ({
        padding: '10px 40px',
      }),
    },

    colLayout: {
      type: Object,
      default: () => ({
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: { span: 24 },
        // span: 8
      }),
    },
  },

  emits: ['update:modelValue'],

  setup(props, { emit }) {
    const handlerValueChange = function (value: any, key: string) {
      emit('update:modelValue', { ...props.modelValue, [key]: value });
    };

    return {
      handlerValueChange,
    };
  },
});
</script>

<style lang="scss" scoped>
.myForm {
  padding-top: 22px;
  .header {
    color: red;
  }
}

.field {
  width: 100%;
}
</style>
